<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<title>The Gimme Javascript Library :: Selector Test Page</title>

		<script type = "text/javascript" src = "../build/debug/gimme.js"></script>
		<script type = "text/javascript">
			//<![CDATA[
			Gimme(window).add_event('load', init);
			function init()
			{
				Gimme('button').add_event('click', btnClick)
				function btnClick()
				{
					var selector = Gimme(this).get_sibling(-1).get_val();
					var guid = 'FADE_' + selector;
					if (!Gimme.Effects.RunningAnimations.contains(guid))
					{
						Gimme(selector).fade_to(0, 1, 'quickly', guid);
					}
				}
			}
			//]]>
		</script>
		
		<link rel = "stylesheet" type = "text/css" href = "./assets/css/gimme.css" />		
		<link rel = "stylesheet" type = "text/css" href = "./assets/css/page.css" />
		<!--[if IE]><link rel = "stylesheet" type = "text/css" href = "./assets/css/ie.css" /><![endif]-->		
		
		<style type = "text/css">			
			#goingUp
			{
				display: block;
				clear: both;
			}
			
			#testSelectors
			{
				width: 350px;
			}
			
			#testSelectors .selector
			{
				display: inline;
				background-color: white;
				font-weight: bold;
				padding: 2px;
				border: 1px solid #000;
				width: 80%;
			}
			#testSelectors .explanation
			{
				margin: 2px;
				display: block;
				font-size: .9em;
				font-weight: normal;
				font-style: italic;
				width: 100%;
			}
			
			#world
			{
				width: 350px;
				border: 2px solid #000;
				background-color: lemonchiffon;
				padding: 8px;
				float: right;
			}
			
			#world *
			{
				margin: 3px;
				padding: 2px;
				border: 1px solid #000;
				display: block;
				display: inline-block; /* for silly IE7 */
				width: 95%;
			}
			
			#world p
			{
				background-color: #fcf;
			}
			
			#world .dog
			{
				background-color: #92b391;
			}
			
			#world .mammal
			{
			
				background-color: #c2c694;
			}
			
			#world span.reptile
			{
				background-color: green;
				color: #fff;
			}
		</style>

	</head>

	<body>
		
		<div id = "container">
			
			<div id = "masthead">
				<img class = "logo" src = "./assets/img/gimme_logo.png" alt = "The Gimme ECMAScript Library" />
				<h1><span>The Gimme Javascript Library</span></h1>
				<h2><span>Taking the pain out of the Javascript</span></h2>
				
				<div id = "nav">
					<ul>
						<li><a href = "./">Home</a></li>
						<li><a href = "./about.html">About</a></li>
						<li><a href = "./demopage.html">Demo Page</a></li>
						<li>Selector Test Page</li>
						<li><a href = "./faq.html">FAQ</a></li>
					</ul>
					<div class = "clear"></div>
				</div>				
			</div>

			<a id = "top"></a>
			<div id = "main">
			
				<h1>Selector Test Page</h1>
				
				<div id = "quick_nav">
					[ <a href = "#try-it-out">Try it out</a> | <a href = "#super-simple">Super simple</a> | <a href = "#a-bit-more-complex">A bit more complex</a> <!--| <a href = "#getting-tricky">Getting tricky</a> |
					<a href = "#what-the-heck">What the heck?</a> | <a href = "#beyond-css">Beyond CSS</a>--> ]
				</div>
				
				<div id = "world">
					#world
					<p id = "petSmart" class = "place dogKennel">
						p#petSmart.place.dogKennel
						<span id = "guinness" class = "dog lab">span#guinness.dog.lab</span>
						<span id = "hagrid" class = "dog bulldog">span#hagrid.dog.bulldog</span>
						<span id = "butch" class = "dog mastiff">span#butch.dog.mastiff</span>
					</p>
					
					<p id = "zoo" class = "place sanDiego">
						p#zoo.place.sanDiego
						<span id = "george" class = "mammal giraffe">span#george.mammal.giraffe</span>
						<span id = "pokey" class = "mammal panda">span#pokey.mammal.panda</span>
						<span id = "spike" class = "mammal rhino">span#spike.mammal.rhino</span>
						<span id = "salazar" class = "reptile snake">span#salazar.reptile.snake</span>
					</p>
				</div>				
				
				<div id = "testSelectors">
					<a id = "try-it-out"></a>
					<h2>Try your own query</h2>
					<p><span class = "explanation">Enter your own CSS query in the box below and click "Try it"</span>
					<input type = "text" class = "selector" />
					<button>Try it</button></p>
					
					<a id = "super-simple"></a>
					<h2>Super simple</h2>
					<p><span class = "explanation">All dogs</span>
					<input class = "selector" value = ".dog" />
					<button>Try it</button></p>
					
					<p><span class = "explanation">All mammals at the zoo</span>
					<input class = "selector" value = "#zoo .mammal" />
					<button>Try it</button></p>
					
					<p><span class = "explanation">All dogs in the dogKennel that are specifically, bulldogs and are represented as &lt;span&gt;</span>
					<input class = "selector" value = ".dogKennel span.dog.bulldog" />
					<button>Try it</button></p>	

					<a id = "a-bit-more-complex"></a>
					<h2>A bit more complex</h2>
					
					<p><span class = "explanation">All places in the world, adjacent to the petSmart dogKennel</span>
					<input class = "selector" value = "#world #petSmart.dogKennel + .place" />
					<button>Try it</button></p>
					
					<p><span class = "explanation">All rhinos adjacent to pandas</span>
					<input class = "selector" value = ".panda + .rhino" />
					<button>Try it</button></p>
				</div>
				
				
				<a id = "goingUp" href = "#top">Top</a>
				
				<div id = "corner1"></div>
				<div id = "corner2"></div>
				<div id = "corner3"></div>
				<div id = "corner4"></div>				
			</div>
			
			<div id = "footer">
				:: The Gimme ECMAScript Library by Stephen Stchur :: Copyright (c) Microsoft, Corp. All rights reserved. ::
			</div>
			
			<div id = "extra1"><span></span></div>
			<div id = "extra2"><span></span></div>
			<div id = "extra3"><span></span></div>
			<div id = "extra4"><span></span></div>
		</div>

	</body>

</html>